<template>
	<div class="content">
		<div class="tar m-b10">
			<Button type="primary" @click="add">添加</Button>
		</div>
		<Table ref="selection" :columns="columns4" :data="list"></Table>
		<Page :total="info" show-elevator :page-size="pageSize" show-total @on-change="changepage" />

		<Modal v-model="modal1" title="添加广告" width='40%' @on-ok="addtu">
			<Form :label-width="100">
				<FormItem label="排序">
					<Input type="text" class="w-50" v-model="orderId" placeholder="请输入序号" />
				</FormItem>
				<!--<FormItem label="链接">
					<Input type="text" class="w-50" v-model="targetUrl" placeholder="请输入图片链接" />
				</FormItem>-->
				<FormItem label="建议图片尺寸">
					宽：750px 高：400px
				</FormItem>
				<FormItem label="图片格式">
					jpg、gif、png
				</FormItem>
				<FormItem label="图片大小">
					不超过10mb
				</FormItem>
				<template>
					<Upload multiple type="drag" action="https://admin.catchon.vip/admin/operating/uploadpicture" :headers='myHeaders' :on-success='handleSuccess' name="imgUrl">
						<div style="padding: 20px 0">
							<Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
							<p>上传图片</p>
						</div>
					</Upload>
				</template>
			</Form>
		</Modal>

		<Modal v-model="modal2" title="修改广告" width='40%' @on-ok="emittu">
			<Form :label-width="100">
				<FormItem label="排序">
					<Input type="text" class="w-50" v-model="orderId1" placeholder="请输入序号" />
				</FormItem>
				<!--<FormItem label="链接">
					<Input type="text" class="w-50" v-model="targetUrl1" placeholder="请输入图片链接" />
				</FormItem>-->
				<FormItem label="建议图片尺寸">
					宽：750px 高：400px
				</FormItem>
				<FormItem label="图片格式">
					jpg、gif、png
				</FormItem>
				<FormItem label="图片大小">
					不超过10mb
				</FormItem>
				<FormItem label="当前图片">
					<img :src="srcimg" alt="" width="200">
				</FormItem>
				<template>
					<Upload multiple type="drag" :headers='myHeaders' action="https://admin.catchon.vip/admin/operating/uploadpicture" :on-success='handleSuccess' name="imgUrl">
						<div style="padding: 20px 0">
							<Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
							<p>重新上传图片</p>
						</div>
					</Upload>
				</template>
			</Form>
		</Modal>
	</div>
</template>
<script>
	let token = localStorage.getItem('mytoken')
	export default {
		data() {
			return {
				myHeaders: {
					Authorization: 'bearer ' + token
				},
				list: [],
				imgUrl: '', // 上传图片地址
				orderId: '', // 序号
				targetUrl: '', // 链接
				orderId1: '', // 修改序号
				targetUrl1: '', // 修改链接
				srcimg: '',
				tuid: '', // 图片id
				// // 分页
				info: null, // 总条数
				page: 1, // 页数
				pageSize: 20, // 每页多少条
				modal1: false,
				modal2: false,
				columns4: [{
						title: '排序',
						key: 'orderId',
						sortable: true
					},
					{
						title: '缩略图',
						key: 'imgUrl',
						render: (h, params) => {
							return h('div', [
								h('img', {
									attrs: {
										src: this.list[params.index].imgUrl,
										preview: '1'
									},
									style: {
										width: '70px',
										margin: '10px 0'
									}
								})
							])
						}
					},
					{
						title: '链接',
						key: 'targetUrl'
					},
					{
						title: '操作',
						key: 'action',
						align: 'center',
						render: (h, params) => {
							return h('div', [
								h(
									'Button', {
										props: {
											type: 'primary',
											size: 'small'
										},
										style: {
											marginRight: '5px'
										},
										on: {
											click: () => {
												this.emit(this.list[params.index].id)
											}
										}
									},
									'修改'
								),
								h(
									'Button', {
										props: {
											type: 'error',
											size: 'small'
										},
										on: {
											click: () => {
												this.remove(this.list[params.index].id)
											}
										}
									},
									'删除'
								)
							])
						}
					}
				]
			}
		},
		methods: {
			// 添加广告
			add() {
				document.getElementsByClassName('ivu-upload-list')[0].innerHTML = '';
				this.modal1 = true
			},
			addtu() {
				let token = localStorage.getItem('mytoken')
				let params = this.qs.stringify({
					typeId: 1,
					imgUrl: this.imgUrl,
					targetUrl: "#",
					orderId: this.orderId
				})
				this.axios.post('operating/discover', params, {
					headers: {
						Authorization: 'bearer ' + token
					}
				}).then(res => {
					if(res.data.code == 8008) {
						this.$Message.info(res.data.message)
						this.getList()
						this.imgUrl = null
						this.targetUrl = null
						this.orderId = null
					} else if(res.data.code == 4004) {
						this.$Message.info(res.data.message)
					} else if(res.data.code == 5501) {
						this.$Message.info(res.data.message)
						localStorage.removeItem('mytoken')
						this.$router.push({
							name: 'login'
						})
					}
				})
			},
			// 修改广告
			emit(id) {
				this.modal2 = true
				this.tuid = id
				let token = localStorage.getItem('mytoken')
				this.axios.get('operating/discover/' + id, {
					headers: {
						Authorization: 'bearer ' + token
					}
				}).then(res => {
					if(res.data.code == 8008) {
						this.orderId1 = res.data.data.discover.orderId
						this.targetUrl1 = res.data.data.discover.targetUrl
						this.srcimg = res.data.data.discover.imgUrl
					} else if(res.data.code == 5501) {
						this.$Message.info(res.data.message)
						localStorage.removeItem('mytoken')
						this.$router.push({
							name: 'login'
						})
					}
				})
			},
			emittu() {
				let token = localStorage.getItem('mytoken')
				let params = this.qs.stringify({
					typeId: 1,
					imgUrl: this.imgUrl,
					id: this.tuid,
					targetUrl: "#",
					orderId: this.orderId1
				})
				this.axios.put('operating/discover', params, {
					headers: {
						Authorization: 'bearer ' + token
					}
				}).then(res => {
					if(res.data.code == 8008) {
						this.$Message.info(res.data.message)
						this.getList()
					} else if(res.data.code == 4004) {
						this.$Message.info(res.data.message)
					} else if(res.data.code == 5501) {
						this.$Message.info(res.data.message)
						localStorage.removeItem('mytoken')
						this.$router.push({
							name: 'login'
						})
					}
				})
			},
			// 删除广告
			remove(id) {
				let token = localStorage.getItem('mytoken')
				this.axios.delete('operating/discover/' + id, {
					headers: {
						Authorization: 'bearer ' + token
					}
				}).then(res => {
					if(res.data.code == 8008) {
						this.$Message.info(res.data.message)
						this.getList()
					} else if(res.data.code == 4004) {
						this.$Message.info(res.data.message)
					} else if(res.data.code == 5501) {
						this.$Message.info(res.data.message)
						localStorage.removeItem('mytoken')
						this.$router.push({
							name: 'login'
						})
					}
				})
			},
			// 查询广告
			getList() {
				let token = localStorage.getItem('mytoken')
				let params = this.qs.stringify({
					typeId: 1,
					pn: this.page,
					pageSize: this.pageSize
				})
				this.axios.post('operating/discovers', params, {
					headers: {
						Authorization: 'bearer ' + token
					}
				}).then(res => {
					if(res.data.code == 8008) {
						this.list = res.data.data.listDiscover
						this.info = res.data.data.integer
					} else if(res.data.code == 5501) {
						this.$Message.info(res.data.message)
						localStorage.removeItem('mytoken')
						this.$router.push({
							name: 'login'
						})
					}
				})
			},
			// 分页
			changepage(page) {
				this.page = page
				let token = localStorage.getItem('mytoken')
				let params = this.qs.stringify({
					typeId: 1,
					pn: page,
					pageSize: this.pageSize
				})
				this.axios.post('operating/discovers', params, {
					headers: {
						Authorization: 'bearer ' + token
					}
				}).then(res => {
					if(res.data.code == 8008) {
						this.list = res.data.data.listDiscover
					} else if(res.data.code == 5501) {
						this.$Message.info(res.data.message)
						localStorage.removeItem('mytoken')
						this.$router.push({
							name: 'login'
						})
					}
				})
			},
			// 获取上传图片的地址
			handleSuccess(res, file) {
				this.imgUrl = res.data.path;
			}

		},
		created() {
			this.getList()
		},
		mounted() {
			this.$Message.config({
				top: 250
			})
		}
	}
</script>
<style lang="less">

</style>